From: Daniel Ruiz de Alegría <daniel@drasite.com>
Date: Tue, 7 May 2019 14:23:11 +0000 (+0200)
Subject: switch: Animate transitions
X-Git-Tag: archive/raspbian/50.5-1+rpi1~1^2~226^2^2~72
X-Git-Url: https://dgit.raspbian.org/%22http://www.example.com/cgi/%22/%22http:/www.example.com/cgi/%22?a=commitdiff_plain;h=71f2355b8adc2d47ed9448a255c2b6ae7432949b;p=gnome-shell.git

switch: Animate transitions

Use a constraint align instead of :x-align to animate it. Match GTK
duration.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2717>
---

diff --git a/js/ui/popupMenu.js b/js/ui/popupMenu.js
index bc98be2fc..1b5219753 100644
--- a/js/ui/popupMenu.js
+++ b/js/ui/popupMenu.js
@@ -375,13 +375,17 @@ export const Switch = GObject.registerClass({
         this._handle = new St.Widget({
             style_class: 'handle',
             y_align: Clutter.ActorAlign.CENTER,
-            x_align: Clutter.ActorAlign.START,
-            x_expand: true,
             constraints: new Clutter.BindConstraint({
                 source: this,
-                coordinate: Clutter.BindCoordinate.SIZE,
+                coordinate: Clutter.BindCoordinate.HEIGHT,
             }),
         });
+        this._handleAlignConstraint = new Clutter.AlignConstraint({
+            name: 'align',
+            align_axis: Clutter.AlignAxis.X_AXIS,
+            source: this,
+        });
+        this._handle.add_constraint(this._handleAlignConstraint);
         this.add_child(this._handle);
 
         this.state = state;
@@ -412,14 +416,24 @@ export const Switch = GObject.registerClass({
         if (this._state === state)
             return;
 
+        let handleAlignFactor;
+        // Calling get_theme_node() while unmapped is an error, avoid that
+        const duration = this._handle.mapped
+            ? this._handle.get_theme_node().get_transition_duration()
+            : 0;
+
         if (state) {
             this.add_style_pseudo_class('checked');
-            this._handle.x_align = Clutter.ActorAlign.END;
+            handleAlignFactor = 1.0;
         } else {
             this.remove_style_pseudo_class('checked');
-            this._handle.x_align = Clutter.ActorAlign.START;
+            handleAlignFactor = 0.0;
         }
 
+        this._handle.ease_property('@constraints.align.factor', handleAlignFactor, {
+            duration,
+        });
+
         this._state = state;
         this.notify('state');
     }